<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #pagination {
            text-align: center;
        }

        #table {
            width: 800px;
            margin: 50px auto;
        }

        #table th {
            height: 35px;
        }

        #title {
            text-align: center;
        }

        button {
            padding: 5px;
            box-shadow: 0 0 5px #000;
        }
    </style>
  </head>
  <body>
    <div id="title">
      <h1>表格标题</h1>
    </div>
    <table id="table" border="1"></table>

    <div id="pagination">
      <button id="prev">《</button>
      <span id="pages"></span>
      <button id="next">》</button>
    </div>
    <script>
      let data = Mock.mock({
            "person|35": [
              {
                "name": '@cname',
                "gender": /^[男女]$/,
                "age|18-22": 1,
                "phone": /^1[\d]{10}$/,
                "address": '@province'
            }
          ]
        })
        // 获取DOM元素：
        const table = document.getElementById('table');
        const prev = document.getElementById('prev');
        const next = document.getElementById('next');
        const pages = document.getElementById('pages');
        // 定义三个全局变量
        //默认设定每页十人
        let num1 = 10;
        //定义一个变量保存每页真实应该展示的数量
        let num2;
        //默认展示第一页
        let page = 1;
        // 书写并调用渲染函数，用于渲染表格数据
        const render = function () {
            table.innerHTML =
                `<thead>
            <th>设备时间</th>
            <th>日志类型</th>
            <th>记录模块</th>
            <th>日志内容</th>
            <th>备注</th>
        </thead>`;

            //判断当前选择的页码对应的人数
            if (data.person.length - num1 * (page - 1) >= 10) {
                num2 = 10;
            } else {
                num2 = data.person.length - num1 * (page - 1);
            }
　　　　　　　//渲染该页对应的数据
            for (let i = num1 * (page - 1); i < num2 + num1 * (page - 1); i++) {
                table.innerHTML +=
                    `<tr>
            <th>${data.person[i].name}</th>
            <th>${data.person[i].gender}</th>
            <th>${data.person[i].age}</th>
            <th>${data.person[i].phone}</th>
            <th>${data.person[i].address}</th>
        </tr>`;
            }
        }
        render();
        // 第五步，根据人数生成页码，将其封装成函数并调用
        const creatPages = function () {
            pages.innerHTML = '';
            for (let i = 0; i < Math.ceil(data.person.length / 10); i++) {
                pages.innerHTML += ` <button data-page="${i+1}">${i+1}</button>`
            }
    }
    creatPages();
    // 第六步，绑定左右及页码翻页按钮点击事件。每次点击事件后都要调用渲染函数
    //绑定向前翻页事件
    prev.onclick = function () {
            if (page > 1) {
                page--;
                render();
            } else {
                alert('当前为第一页！')
            }
        }

        //绑定向后翻页事件
        next.onclick = function () {
            if (page < Math.ceil(data.person.length / 10)) {
                page++;
                render();
            } else {
                alert('当前为最后一页！')
            }
        }

        //绑定点击页码渲染相应的数据事件
        pages.addEventListener('click', function (e) {
            page = e.target.getAttribute('data-page');
            render();
        })
    </script>
  </body>
</html>
